<template>
  <div class="centerBottom">
    <div class="title">
      近视率趋势（因小学、初中、高中数据样本差异，近视率发展趋势仅微参考）
    </div>
    <div id="bottomBar" class="bottomBar" ref="bottomBar"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "centerBottom",
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.chart = echarts.init(this.$refs["bottomBar"]);
      const option = {
        xAxis: {
          type: "category",
          data: [
            "一年级",
            "二年级",
            "三年级",
            "四年级",
            "五年级",
            "六年级",
            "初一",
            "初二",
            "初三",
            "高一",
            "高二",
            "高三"
          ],
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#ffffff"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#181f3a"
            }
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#181f3a"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
              color: "#ffffff"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#181f3a"
            }
          },
        },
        grid: {
          x: "10%",
          y: "10%",
          x2: "10%",
          y2: "15%"
        },
        series: [
          {
            type: "bar",
            barWidth: 10,
            data: [10, 52, 200, 334, 390, 330, 220, 100, 100, 110, 120, 130],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#00efe1" }, //柱图渐变色
                  { offset: 1, color: "#0055fe" }, //柱图渐变色
                ]),
              },
            },
          },
          {
            type: "line",
            data: [101, 32, 210, 314, 390, 330, 220, 100, 100, 110, 120, 130],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#3d1fca" }, //柱图渐变色
                  { offset: 1, color: "#a454fd" }, //柱图渐变色
                ]),
              },
            },
          }
        ]
      };
      this.chart.setOption(option);
    }
  }
};
</script>
<style scoped>
.centerBottom {
  width: 100%;
  height: 280px;
  background: url("../assets/min.png") no-repeat;
  background-size: 100% 100%;
}
.title {
  height: 40px;
  color: #58aff8;
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
  padding-left: 20px;
}
.bottomBar {
  width: 100%;
  height: 240px;
}
</style>